<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import SubmitBar from '@/components/SubmitBar.vue'
import { getGoodsInfoByIdApi } from '@/apis/goods.js'

import { ref } from 'vue'

const goodsInfo = ref({})
const id = ref(null)
onLoad((e) => {
  id.value = e.id
})
const getGoodsInfoById = async () => {
  const res = await getGoodsInfoByIdApi(id.value)
  goodsInfo.value = res.data.data
}
onShow(() => {
  getGoodsInfoById()
})


</script>
<template>
  <view class="page">
    <view class="nav">
      <up-navbar :placeholder="true" border :autoBack="true" title="商品详情" rightIcon="more-dot-fill">
      </up-navbar>
    </view>

    <!-- 内容 -->
    <view class="content">
      <view class="goods-info">
        <view class="goods-info-img">
          <up-swiper v-if="goodsInfo.goodsCarousel && goodsInfo.goodsCarousel > 1"
            :list="goodsInfo.goodsCarousel"></up-swiper>
          <up-image v-else :src="goodsInfo.goodsCoverImg" mode="aspectFit" width="100%"></up-image>
        </view>
        <view class="goods-info-title">
          <text>{{ goodsInfo.goodsIntro }}</text>
        </view>
        <view class="goods-info-span">
          <text>免邮费 顺丰快递</text>
        </view>
        <view class="goods-info-price">
          <text>￥</text>
          <text>{{ goodsInfo.sellingPrice }}</text>
        </view>
        <view class="goods-info-desc">
          <up-parse :content="goodsInfo.goodsDetailContent" :lazyLoad="true"
            :loadingImg="`/static/images/shopping-cart-active.png`"></up-parse>
        </view>
      </view>
    </view>

    <view>
      <SubmitBar :goodsId="goodsInfo.id"></SubmitBar>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.page {
  .content {
    .goods-info-img {
    }

    .goods-info-title {
      font-size: 1.2rem;
      font-size: 600;
      padding: 10rpx 20rpx;
    }

    .goods-info-span {
      color: #ccc;
      font-size: .8rem;
      padding: 0 20rpx;
    }

    .goods-info-price {
      color: #ff0000;
      font-size: 1.2rem;
      font-weight: 500;
      padding: 10rpx 20rpx;
    }

    .goods-info-desc{
      padding: 20rpx;
    }


  }
}
</style>